<template>
    <div class="swiper-container" id="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../assets/img/03.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../assets/img/04.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../assets/img/05.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../assets/img/06.jpg" alt=""></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
    export default {
        mounted(){
            var swiper = new Swiper('.swiper-container', {
                loop: true,
                centeredSlides:true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                }
            });
        }
    }
</script>

<style scoped>
    .swiper-container {
        width: 100%;
        height:3rem;
        background: pink;
        position: relative;
    }
    .swiper-slide img {
        width: 100%;
        height: 100%;
    }
</style>